<template>
  <div :class="cardClasses" @click="handleClick">
    <!-- 卡片头部 -->
    <div v-if="hasHeader" class="apple-card__header">
      <slot name="header">
        <div v-if="title || subtitle" class="card-header-content">
          <h3 v-if="title" class="card-title">{{ title }}</h3>
          <p v-if="subtitle" class="card-subtitle">{{ subtitle }}</p>
        </div>
        <div v-if="hasHeaderExtra" class="card-header-extra">
          <slot name="extra" />
        </div>
      </slot>
    </div>

    <!-- 卡片图片 -->
    <div v-if="image || $slots.image" class="apple-card__image">
      <slot name="image">
        <img v-if="image" :src="image" :alt="imageAlt" class="card-image" />
      </slot>
    </div>

    <!-- 卡片主体 -->
    <div v-if="hasBody" class="apple-card__body">
      <slot>
        <p v-if="content" class="card-content">{{ content }}</p>
      </slot>
    </div>

    <!-- 卡片底部 -->
    <div v-if="hasFooter" class="apple-card__footer">
      <slot name="footer" />
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="card-loading">
      <div class="loading-spinner"></div>
    </div>

    <!-- 徽章 -->
    <div v-if="badge" class="card-badge" :class="badgeClass">
      {{ badge }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props定义
interface Props {
  // 卡片标题
  title?: string
  // 卡片副标题
  subtitle?: string
  // 卡片内容
  content?: string
  // 卡片图片
  image?: string
  // 图片alt文本
  imageAlt?: string
  // 是否可点击
  clickable?: boolean
  // 是否悬浮效果
  hoverable?: boolean
  // 是否加载中
  loading?: boolean
  // 卡片尺寸
  size?: 'small' | 'medium' | 'large'
  // 卡片变体
  variant?: 'default' | 'outlined' | 'elevated' | 'flat'
  // 阴影级别
  shadow?: 'none' | 'small' | 'medium' | 'large'
  // 圆角级别
  rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'
  // 边框
  bordered?: boolean
  // 徽章
  badge?: string | number
  // 徽章类型
  badgeType?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  // 背景色
  background?: 'primary' | 'secondary' | 'tertiary' | 'transparent'
}

// Emits定义
interface Emits {
  (e: 'click', event: MouseEvent): void
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  variant: 'default',
  shadow: 'small',
  rounded: 'medium',
  badgeType: 'primary',
  background: 'primary',
  clickable: false,
  hoverable: true,
  loading: false,
  bordered: false
})

const emit = defineEmits<Emits>()

// 计算属性
const cardClasses = computed(() => {
  const classes = ['apple-card']
  
  // 尺寸
  if (props.size !== 'medium') {
    classes.push(`apple-card--${props.size}`)
  }
  
  // 变体
  if (props.variant !== 'default') {
    classes.push(`apple-card--${props.variant}`)
  }
  
  // 阴影
  if (props.shadow !== 'small') {
    classes.push(`apple-card--shadow-${props.shadow}`)
  }
  
  // 圆角
  if (props.rounded !== 'medium') {
    classes.push(`apple-card--rounded-${props.rounded}`)
  }
  
  // 背景
  if (props.background !== 'primary') {
    classes.push(`apple-card--bg-${props.background}`)
  }
  
  // 状态
  if (props.clickable) {
    classes.push('apple-card--clickable')
  }
  
  if (props.hoverable) {
    classes.push('apple-card--hoverable')
  }
  
  if (props.loading) {
    classes.push('apple-card--loading')
  }
  
  if (props.bordered) {
    classes.push('apple-card--bordered')
  }
  
  return classes
})

const badgeClass = computed(() => {
  return `card-badge--${props.badgeType}`
})

const hasHeader = computed(() => {
  return props.title || props.subtitle || hasHeaderSlot.value || hasHeaderExtra.value
})

const hasHeaderSlot = computed(() => {
  return !!props.$slots.header
})

const hasHeaderExtra = computed(() => {
  return !!props.$slots.extra
})

const hasBody = computed(() => {
  return props.content || !!props.$slots.default
})

const hasFooter = computed(() => {
  return !!props.$slots.footer
})

// 事件处理
const handleClick = (event: MouseEvent) => {
  if (props.clickable && !props.loading) {
    emit('click', event)
  }
}
</script>

<style scoped>
.apple-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  border-radius: var(--radius-large);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

/* 基础变体 */
.apple-card--default {
  box-shadow: var(--shadow-small);
  border: 1px solid var(--border-secondary);
}

.apple-card--outlined {
  border: 1px solid var(--border-primary);
}

.apple-card--elevated {
  box-shadow: var(--shadow-medium);
}

.apple-card--flat {
  box-shadow: none;
  border: none;
}

/* 阴影变体 */
.apple-card--shadow-none {
  box-shadow: none !important;
}

.apple-card--shadow-small {
  box-shadow: var(--shadow-small);
}

.apple-card--shadow-medium {
  box-shadow: var(--shadow-medium);
}

.apple-card--shadow-large {
  box-shadow: var(--shadow-large);
}

/* 圆角变体 */
.apple-card--rounded-none {
  border-radius: 0;
}

.apple-card--rounded-small {
  border-radius: var(--radius-small);
}

.apple-card--rounded-medium {
  border-radius: var(--radius-medium);
}

.apple-card--rounded-large {
  border-radius: var(--radius-large);
}

.apple-card--rounded-full {
  border-radius: var(--radius-xlarge);
}

/* 背景变体 */
.apple-card--bg-primary {
  background-color: var(--bg-primary);
}

.apple-card--bg-secondary {
  background-color: var(--bg-secondary);
}

.apple-card--bg-tertiary {
  background-color: var(--bg-tertiary);
}

.apple-card--bg-transparent {
  background-color: transparent;
}

/* 尺寸变体 */
.apple-card--small {
  padding: var(--spacing-sm);
}

.apple-card--medium {
  /* 使用默认样式 */
}

.apple-card--large {
  padding: var(--spacing-lg);
}

/* 状态变体 */
.apple-card--bordered {
  border: 1px solid var(--border-primary);
}

.apple-card--clickable {
  cursor: pointer;
  user-select: none;
}

.apple-card--hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-large);
}

.apple-card--clickable:active {
  transform: translateY(0);
}

.apple-card--loading {
  pointer-events: none;
}

.apple-card--loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 1;
}

/* 卡片头部 */
.apple-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-secondary);
  background-color: var(--bg-secondary);
}

.card-header-content {
  flex: 1;
  min-width: 0;
}

.card-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.card-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.card-header-extra {
  flex-shrink: 0;
}

/* 卡片图片 */
.apple-card__image {
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 卡片主体 */
.apple-card__body {
  flex: 1;
  padding: var(--spacing-lg);
}

.card-content {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
}

/* 卡片底部 */
.apple-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-secondary);
  background-color: var(--bg-secondary);
}

/* 加载状态 */
.card-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--apple-gray-5);
  border-top: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 徽章 */
.card-badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 11px;
  font-weight: 600;
  color: white;
  border-radius: var(--radius-small);
  z-index: 1;
}

.card-badge--primary {
  background-color: var(--color-primary);
}

.card-badge--success {
  background-color: var(--color-success);
}

.card-badge--warning {
  background-color: var(--color-warning);
}

.card-badge--danger {
  background-color: var(--color-danger);
}

.card-badge--info {
  background-color: var(--apple-gray-2);
}

/* 特殊布局：无头部和底部时调整主体padding */
.apple-card:not(:has(.apple-card__header)):not(:has(.apple-card__footer)) .apple-card__body {
  padding: var(--spacing-lg);
}

/* 特殊布局：仅有主体时 */
.apple-card:has(.apple-card__body):not(:has(.apple-card__header)):not(:has(.apple-card__footer)):not(:has(.apple-card__image)) .apple-card__body {
  padding: var(--spacing-lg);
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .apple-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
  }

  .apple-card__header,
  .apple-card__footer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
  }

  .apple-card--loading::before {
    background-color: rgba(0, 0, 0, 0.6);
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .apple-card {
    border-width: 2px;
  }

  .card-title {
    font-weight: 700;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .apple-card {
    transition: none;
  }

  .apple-card--hoverable:hover {
    transform: none;
  }

  .loading-spinner {
    animation: none;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .apple-card__header,
  .apple-card__body,
  .apple-card__footer {
    padding: var(--spacing-md);
  }

  .apple-card--small .apple-card__header,
  .apple-card--small .apple-card__body,
  .apple-card--small .apple-card__footer {
    padding: var(--spacing-sm);
  }

  .card-title {
    font-size: 16px;
  }
}
</style>